<template>
    <div class="container">
        <el-container>
            <el-menu
                :default-active="this.$route.path"
                class="el-menu-vertical-demo"
                width="200px"
                background-color="#545c64"
                text-color="#fff"
                :collapse="isCollapse"
                :router="true"
                active-text-color="#ffd04b"
            >
                <el-submenu index="/oa/system">
                    <template slot="title">
                        <i class="el-icon-monitor"></i>
                        <span>系统信息</span>
                    </template>
                    <el-menu-item index="/oa/system/info">
                        <i class="el-icon-data-line"></i>
                        <span>系统情况</span>
                    </el-menu-item>
                    <el-menu-item index="/oa/system/alarm">
                        <i class="el-icon-s-operation"></i>
                        <span>报警信息</span>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item index="/oa/backupDB">
                    <i class="el-icon-chat-dot-round"></i>
                    <span slot="title">备库管理</span>
                </el-menu-item>
                <el-menu-item index="/oa/copy">
                    <i class="el-icon-chat-dot-round"></i>
                    <span slot="title">复制状态与监控</span>
                </el-menu-item>
                <el-menu-item index="/oa/breakdown">
                    <i class="el-icon-chat-dot-round"></i>
                    <span slot="title">故障检测与告警</span>
                </el-menu-item>
                <el-menu-item index="/oa/test">
                    <i class="el-icon-chat-dot-round"></i>
                    <span slot="title">灾备测试与验证</span>
                </el-menu-item>
                <el-menu-item index="/oa/dataSync">
                    <i class="el-icon-chat-dot-round"></i>
                    <span slot="title">数据同步</span>
                </el-menu-item>
                <el-menu-item index="/oa/backup">
                    <i class="el-icon-chat-dot-round"></i>
                    <span slot="title">备份与恢复</span>
                </el-menu-item>
                <el-menu-item index="/oa/auth"  v-if="manageType==20">
                    <i class="el-icon-chat-dot-round"></i>
                    <span slot="title">权限管理</span>
                </el-menu-item>
            </el-menu>
            <el-container>
                <el-header style="padding: 20px;  display:flex; justify-content: space-between; background: #f7f8fa;">
                    <div style="font-size: 20px; display:flex; justify-content: space-between;">
                        <div v-if="!isCollapse" @click="isCollapse = true" style="line-height:20px; margin-right:15px"><i class="el-icon-s-fold"/></div>
                        <div v-else @click="isCollapse = false" style="line-height:20px; margin-right:15px"><i class="el-icon-s-unfold"/></div>
                        <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height:20px; font-size:16px">
                            <el-breadcrumb-item v-if="breadNum==1 || breadNum==2">系统概况</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadNum==1">系统信息</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadNum==2">报警信息</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadNum==3">数据同步</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadNum==4">备库管理</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadNum==6">灾备测试与验证</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadNum==5">备份与恢复</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadNum==7">故障检测与告警</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadNum==8">复制状态与监控</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div>
                        <span style="color: #409eff; font-size: 16px; margin: 0 15px; line-height:20px">{{userInfo.username}}</span>
                        <el-dropdown @command="handleCommand">
                            <i class="el-icon-switch-button" style="font-size: 20px;margin-right: 20px"></i>
                            <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="showUpdatePassword">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                <el-main>
                    <router-view></router-view>
                    <el-dialog
                        title="修改密码"
                        :visible.sync="passwordUpdateShow"
                        width="30%">
                        <el-form ref="messagePopupEle" :model="updateInfo" label-width="120px">
                            <el-form-item label="旧密码" prop="old_password" :rules="[{ required: true, message: '请输入旧密码' }]">
                                <el-input v-model="updateInfo.old_password" clearable maxlength="20" placeholder="请输入旧密码" size="small" show-password/>
                            </el-form-item>
                            <el-form-item label="登录新密码" prop="new_password" :rules="[{ required: true, message: '请输入登录新密码' }]">
                                <el-input v-model="updateInfo.new_password" clearable maxlength="50" placeholder="请输入登录新密码" size="small" show-password/>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="confirm_password" :rules="[{ required: true, message: '请输入确认密码' }]">
                                <el-input v-model="updateInfo.confirm_password" clearable maxlength="20" placeholder="请输入确认密码" size="small" show-password />
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="resetForm">取 消</el-button>
                            <el-button type="primary" @click.native="updatePassword">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-main>
            </el-container>
        </el-container>
    </div>
    
</template>

<script>
import {get, post} from "@/utils/http"
export default {
    data() {
        return {
            isCollapse: false,
            userInfo: this.$store.getters.userInfo,
            manageType: this.$store.getters.manageType,
            clickMenuNum: -1,
            breadNum: 1,
            passwordUpdateShow: false,
            updateInfo: {
                new_password: "",
                old_password: "",
                confirm_password: "",
                user_id: this.$store.getters.userInfo.id,
            }
        }
    },
    watch: {
        '$route'(toRouter, fromRouter) {
            this.doMemuActive(toRouter);
            this.breadShow(toRouter);
        },
    },
    methods: {
        doMemuActive(toRouter) {
            if (toRouter.meta.activeMenu == 'audit') {
                this.clickMenuNum = 1;
            } else if (toRouter.meta.activeMenu == 'forumdetail') {
                this.clickMenuNum = 5;
            } else if (toRouter.meta.activeMenu == 'cooperationedit') {
                this.clickMenuNum = 3;
            } else if (toRouter.meta.activeMenu == 'iasedit') {
                this.clickMenuNum = 2;
            } else if (toRouter.meta.activeMenu == 'achievementedit') {
                this.clickMenuNum = 1;
            } else {
                this.clickMenuNum = -1;
            }
        },
        breadShow(toRouter) {
            if (toRouter.meta.activeMenu == 'info') {
                this.breadNum = 1;
            } else if (toRouter.meta.activeMenu == 'alarm') {
                this.breadNum = 2;
            } else if (toRouter.meta.activeMenu == 'backupDB') {
                this.breadNum = 4;
            } else if (toRouter.meta.activeMenu == 'dataSync') {
                this.breadNum = 3;
            } else if (toRouter.meta.activeMenu == 'backup') {
                this.breadNum = 5;
            } else if (toRouter.meta.activeMenu == 'test') {
                this.breadNum = 6;
            } else if (toRouter.meta.activeMenu == 'breakdown') {
                this.breadNum = 7;
            } else if (toRouter.meta.activeMenu == 'copy') {
                this.breadNum = 8;
            }
        },
        handleCommand(command){
            if (command == "logout") {
                this.$router.push("/");
                this.$store.commit("user/SET_USERID", null);//在store/modules/system.js里面找到对应的数据
                this.$store.commit("user/SET_ROLEID", null);
                this.$store.commit("user/SET_USERINFO", null);
            }
        },
        showUpdatePassword() {
            this.passwordUpdateShow = true
            console.log(this.passwordUpdateShow)
        },
        updatePassword() {
            console.log(this.updateInfo)
            post("/user/password/edit", this.updateInfo)
            .then(res=>{
                if(res.data.code == 0) {
                    this.$message.success('修改成功');
                } else {
                    this.$message.error(res.data.message)
                }
            })
            console.log("yes")
            this.resetForm()
        },
        resetForm() {
            this.passwordUpdateShow = false
            this.updateInfo.new_password = ""
            this.updateInfo.old_password = ""
            this.updateInfo.confirm_password = ""
            this.$refs["messagePopupEle"].resetFields();
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    height:100vh;
    .el-container {
        height: 100%;
        .el-menu:not(.el-menu--collapse) {
            height: 100%;
            width: 200px;
        }
    }
    .el-menu-vertical-demo {
        font-family: Helvetica;
        font: 13px !important;
    }
    .el-main {
        background: #f2f2f2;
        padding: 0 !important;
    }
}
.clicked {
    color: #ffd04b !important;
    i {color: #ffd04b !important;}
}
</style>